<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #carousel {
        height: 200px;
        width: 500px;
        margin: 20px auto;
    }

    #marsk {
        width: 500px;
        height: 200px;
        border: 3px solid orange;
        overflow: hidden;
        position: relative;
    }

    #arrow {
        height: 100%;
        width: 100%;
        position: relative;
        z-index: 9;
        display: none;
    }

    #marsk>div>#btn1 {
        position: absolute;
        top: 43%;
        left: 0;
    }

    #marsk>div>#btn2 {
        position: absolute;
        top: 43%;
        right: 0;
    }

    ul {
        float: left;
        display: flex;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    li {
        list-style: none;
        width:500px;
    }
    #indecator{
        display:inline-block;
        z-index:99;
        position:absolute;
        bottom:5%;
        right:32%;
    }
    #indecator>span{
        display:inline-block;
        width:30px;
        height:30px;
        font-size:30px/30px "";
        text-align:center;
        background-color:grey;
        opacity:0.8;
        margin:0 5px;
        cursor: pointer;
    }
    .active{
        background-color:hotpink!important;
    }
</style>

<body>
    <div id="carousel">
        <div id="marsk">
            <ul>
                <li>
                    <img src="http://chst.vip/avatar/1.jpg" alt="">
                </li>
                <li>
                    <img src="http://chst.vip/avatar/2.gif" alt="">
                </li>
                <li>
                    <img src="http://chst.vip/avatar/3.jpg" alt="">
                </li>
                <li>
                    <img src="http://chst.vip/avatar/4.gif" alt="">
                </li>
                <!-- <li>
                    <img src="http://chst.vip/avatar/1.jpg" alt="">
                </li> -->
            </ul>
            <div id="arrow">
                <button id="btn1">&lt</button>
                <button id="btn2">&gt</button>
            </div>
           
        </div>
    </div>
</body>

</html>
<script src="./animate.js"></script>
<script src="./index.js"></script>
<script src="./fangdou.js"></script>
